import earcut from "./earcut.js";
import { attach, parametric } from "./utils.js";
import { Vector2D } from "./Vector2D.js";

const canvas = document.querySelector("canvas");
// const ctx = canvas.getContext("2d");
const gl = canvas.getContext('webgl')

const vertex = `
  attribute vec2 position;
  varying vec3 color;
  void main() {
    gl_PointSize = 1.0;
    color = vec3(0.0, 0.5 + position * 0.5);
    gl_Position = vec4(position, 0.0, 1.0);
  }
`;


  const fragment = `
  precision mediump float;
  varying vec3 color;
  void main()
  {
    gl_FragColor = vec4(color, 1.0);
  }    
`;

const program = attach(gl, vertex, fragment)


// const vertices = [
//   [-0.7, 0.5],
//   [-0.4, 0.3],
//   [-0.25, 0.71],
//   [-0.1, 0.56],
//   [-0.1, 0.13],
//   [0.4, 0.21],
//   [0, -0.6],
//   [-0.3, -0.3],
//   [-0.6, -0.3],
//   [-0.45, 0.0],
// ]
// .map(vec => [250 * vec[0] + canvas.width / 2, 250 * vec[1] + canvas.height / 2]);

// 椭圆
// const ellipse = parametric(
//   (t, x0, y0, radiuX, radiuY) => x0 + radiuX * Math.cos(t),
//   (t, x0, y0, radiuX, radiuY) => y0 + radiuY * Math.sin(t),
// )

// const vertices = ellipse(0, Math.PI * 2, 100, 0, 0, 1, 0.5).points

// 五角星
const star = [[0, 1]]
let one = new Vector2D(0, 1)
for (let i = 1; i < 5; i++) {
  one.rotate(Math.PI * 0.4)
  star.push([one.x, one.y])
}

const vertices = [
  star[0],
  star[2],
  star[4],
  star[1],
  star[3],
]

console.log(vertices)

const points = vertices.flat()
const triangles = earcut(points)

const position = new Float32Array(points)
const cells = new Uint16Array(triangles)

const pointBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer)
gl.bufferData(gl.ARRAY_BUFFER, position, gl.STATIC_DRAW)

const vPosition = gl.getAttribLocation(program, 'position')
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(vPosition)

const cellsBuffer = gl.createBuffer()
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cellsBuffer)
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cells, gl.STATIC_DRAW)

gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.LINE_LOOP, 0, vertices.length)
gl.drawElements(gl.TRIANGLES, cells.length, gl.UNSIGNED_SHORT, 0)
// gl.drawElements(gl.LINE_LOOP, cells.length, gl.UNSIGNED_SHORT, 0)
// gl.drawElements(gl.LINE_LOOP, vertices.length, gl.UNSIGNED_SHORT, 0)


// ctx.translate(250, 250)
// ctx.scale(1, -1)

/**
 *
 * @param {Array<Vector2D | number[]>} points
 */
// function draw(
//   points,
//   { fillStyle = "red", close = false, rule = "evenodd" } = {}
// ) {
//   ctx.beginPath();
//   ctx.moveTo(...points[0]);
//   for (let i = 1; i < points.length; i++) {
//     ctx.lineTo(...points[i]);
//   }
//   if (close) ctx.closePath();
//   ctx.fillStyle = fillStyle;
//   ctx.fill(rule);
//   ctx.stroke();
// }

// ctx.translate(canvas.width / 2, canvas.height / 2)
// ctx.scale(1, -1)
// const position = vertices.map(vec => new Vector2D(vec[0], vec[1]))
// draw(position)

// const { left, top } = canvas.getBoundingClientRect()
// canvas.addEventListener('mousemove', evt => {
//   const { x, y } = evt
//   const offsetX = x - left
//   const offsetY = y - top
//   ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height)
//   // 只能判断最近画的一次path
//   // if (ctx.isPointInPath(offsetX, offsetY)) {
//   if (isPointInPath({
//     vertices,
//     cells
//   }, new Vector2D(offsetX, offsetY))) {
//     draw(position, {
//       fillStyle: 'green'
//     })
//   } else {
//     draw(position)
//   }
// })

// const points = [new Vector2D(0, 100)]

// for (let i = 1; i < 5; i++) {
//   points.push(points[0].copy().rotate(i * 0.4 * Math.PI))
// }

// ctx.save()
// ctx.translate(-128, 0)
// draw(points)
// ctx.restore()

// const stars = [
//   points[0],
//   points[2],
//   points[4],
//   points[1],
//   points[3],
// ]

// ctx.save()
// ctx.translate(128, 0)
// draw(stars)
// ctx.restore()
